<template>
   <view class="uv-page">
      <uv-gap bgColor="#fff" height="20"></uv-gap>
      <uv-cell-group>
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            @click="openLoadingPage(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
            icon="level"
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <uv-loading-page
         :loadingText="loadingPageData.loadingText"
         :image="loadingPageData.image"
         :iconSize="loadingPageData.iconSize"
         :loadingMode="loadingPageData.loadingMode"
         :bgColor="loadingPageData.bgColor"
         :loading="loading"
         :color="loadingPageData.color"
         :loadingColor="loadingPageData.loadingColor"
      ></uv-loading-page>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

type LoadingMode = 'circle' | 'spinner' | 'semicircle';

// 响应式数据
const loading = ref(false);
const loadingPageData = ref({
   // 自定义提示内容
   loadingText: '',
   // 自定义图片
   image: '',
   // 自定义加载动画模式
   loadingMode: 'circle' as LoadingMode,
   // 自定义背景色
   bgColor: '#ffffff',
   iconSize: '',
   color: '',
   loadingColor: '',
});

const list = ref([
   {
      title: '自定义提示内容',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/promptContent.png',
   },
   {
      title: '自定义图片',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customPicture.png',
   },
   {
      title: '自定义加载动画模式',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customMode.png',
   },
   {
      title: '自定义背景色',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customBgColor.png',
   },
]);

// 方法
const openLoadingPage = (index: number) => {
   loadingPageData.value = {
      loadingText: '',
      image: '',
      loadingMode: 'circle' as LoadingMode,
      bgColor: '#ffffff',
      iconSize: '28',
      color: '',
      loadingColor: '',
   };

   if (index === 0) {
      // 自定义提示内容
      loadingPageData.value.loadingMode = 'semicircle';
      loadingPageData.value.loadingText = '正在加载';
      loadingPageData.value.color = '#C8C8C8';
      loadingPageData.value.loadingColor = '#C8C8C8';
   } else if (index === 1) {
      // 自定义图片
      loadingPageData.value.image = '/static/common/logo.png';
      loadingPageData.value.loadingText = '加载中...';
      loadingPageData.value.iconSize = '40';
      loadingPageData.value.color = '#C8C8C8';
      loadingPageData.value.loadingColor = '#C8C8C8';
   } else if (index === 2) {
      // 自定义加载动画模式
      loadingPageData.value.loadingMode = 'circle';
      loadingPageData.value.loadingText = '加载中...';
      loadingPageData.value.color = '#C8C8C8';
      loadingPageData.value.loadingColor = '#C8C8C8';
   } else if (index === 3) {
      // 自定义背景色
      loadingPageData.value.loadingMode = 'spinner';
      loadingPageData.value.bgColor = 'rgba(0, 0, 0, 0.3)';
      loadingPageData.value.loadingText = '加载中...';
      loadingPageData.value.color = '#eee';
      loadingPageData.value.loadingColor = '#ddd';
   }

   loading.value = true;
   setTimeout(() => {
      loading.value = false;
   }, 2000);
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
